<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>资源管理</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">


                    <table id="datatable" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>
                                <button type="button" id="selectAll" class="btn btn-outline btn-primary btn-xs"><i class="fa fa-plus"></i></button>
                                <button type="button" id="selectZero" class="btn btn-outline btn-primary btn-xs"><i class="fa fa-minus"></i></button>
                                <button type="button" id="deleteSelect" class="btn btn-outline btn-danger btn-xs"><i class="fa fa-trash-o"></i></button>
                            </th>
                            <th>id</th>
                            <th>资源名</th>
                            <th>资源地址</th>
                            <th>资源权限</th>
                            <th>父级资源</th>
                            <th>排序</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="editModal" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <div class="modal-title">编辑资源</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal form-label-left">
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">资源名称：</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" name="name" class="form-control" placeholder="资源名称">
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">父级资源：</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <select class="form-control m-b" name="parentId">
                                </select>
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">资源地址：</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" name="url" class="form-control" placeholder="资源地址"/>
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">资源权限：</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" name="permission" class="form-control" placeholder="资源的权限代码"/>
                            </div>
                        </div>
                        <div class="item form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">排序：</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" name="sort" class="form-control" placeholder="同级资源排序的权重"/>
                            </div>
                        </div>
                    </form>
                    <button id="edit" class="btn btn-primary" style="margin-left: 40%;margin-top: 20px;">提交修改</button>

                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <div class="modal-title">添加资源</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal form-label-left">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">资源名称：</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" name="name" class="form-control" placeholder="资源名称">
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">父级资源：</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <select class="form-control m-b" name="parentId">

                            </select>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">资源地址：</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" name="url" class="form-control" placeholder="资源地址"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">资源权限：</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" name="permission" class="form-control" placeholder="资源的权限代码"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">排序：</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" name="sort" class="form-control" placeholder="同级资源排序的权重"/>
                        </div>
                    </div>

                    </form>
                    <button id="add" class="btn btn-primary" style="margin-left: 40%;margin-top: 20px;">添加</button>

                </div>
            </div>
        </div>
    </div>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/content.js"></script>
<script src="js/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript">
    var table;
    $(function(){
        table=  $('#datatable').DataTable({
            ajax: {
                url: '/api/resources/listAll'
            },
            info : true,
            pageLength:10,
            lengthMenu:  //自定义分页长度
                [ 10, 20, 50 ]
            ,
            padding:false,
            searching: false,
            ordering:  false,
            dom: '<"top"i>rt<"bottom"flp><"clear">',
            //列对应关系
            // <th>id</th>
            // <th>资源名</th>
            // <th>资源地址</th>
            // <th>资源权限</th>
            // <th>父级资源</th>
            // <th>排序</th>
            // <th>操作</th>
            columns: [
                {
                    width:'100px',
                    sClass:"text-center",
                    data: 'id',
                    render:function(id){
                        return '<input type="checkbox" name="select" value="'+id+'" /> ';
                    }
                },
                {
                    width:'50px',
                    data: 'id'
                },
                {data:'name'},
                {data:'url'},
                {data:'permission'},
                {
                    sClass:"text-center",
                    data:'parent',
                    render:function(data){
                        if(data==null)
                            return "----";
                        else{
                            return data.name;
                        }
                    }
                },
                {data:'sort'},
                {
                    width:'100px',
                    sClass:"text-center",
                    data:'id',
                    render:function(data,type,full){
                        return '<a class="edit btn btn-xs btn-primary" onclick="getContent(' + data + ')" data-toggle="modal" data-target="#editModal" ><i class="fa fa-edit"></i>编辑</a>'+
                            '<a class="btn btn-xs btn-danger btn-remove" onclick="remove(['+data+'])"><i class="fa fa-trash-o"></i>删除</a>';
                    }
                }
            ]
        });

        $("#datatable_info").before('<button class="btn btn-primary"  data-toggle="modal" data-target="#addModal" onclick="setModalBlank()">添加资源</button>');

        $("#selectAll").click(function(){
            $("input[name='select']").each(function() {
                this.checked = true;
            });
        });
        $("#selectZero").click(function(){
            $("input[name='select']").each(function() {
                this.checked = false;
            });
        });
        $("#deleteSelect").click(function(){
            var ids=[];
            var i=0;
            $("input[name=select]:checked").each(function() {
                ids[i++]=$(this).val();
            });
            remove(ids);
        });
        $("#edit").click(function(){
            $.ajax({
                url:'/api/resources/edit',
                type:'post',
                data:{
                    id:$("body").data("id"),
                    name:$("#editModal input[name='name']").val(),
                    parentId:$("#editModal select[name='parentId']").val(),
                    url:$("#editModal input[name='url']").val(),
                    permission:$("#editModal input[name='permission']").val(),
                    sort:$("#editModal input[name='sort']").val()
                },
                success:function(resp){
                    if(resp.status==200){
                        toastr.success("修改成功");
                        $("#editModal").modal("hide");
                        reloadAll();
                    }else{
                        toastr.error(resp.message);
                    }
                }
            });
        });
        $("#add").click(function(){
            $.ajax({
                url:'/api/resources/add',
                type:'post',
                data:{
                    name:$("#addModal input[name='name']").val(),
                    parentId:$("#addModal select[name='parentId']").val(),
                    url:$("#addModal input[name='url']").val(),
                    permission:$("#addModal input[name='permission']").val(),
                    sort:$("#addModal input[name='sort']").val()
                },
                success:function(resp){
                    if(resp.status==200){
                        toastr.success("添加成功");
                        $("#addModal").modal("hide");
                        reloadAll();
                    }else{
                        toastr.error(resp.message);
                    }
                }
            });
        });
    });

    //重置模态框
    function setModalBlank(){
        $("#addModal input").val("");
        $("#addModal select[name='parentId']").html(getParentResources());
    }
    function getParentResources(){
        var parentResourcesHtml='<option value="0">无</option>';
        $.ajax({
            url:'/api/resources/listParents',
            type:'post',
            async:false,
            success:function(resp){
                for(var i in resp) {
                    parentResourcesHtml += '<option value="'+resp[i].id+'">'+resp[i].name+'</option>';
                }
            }
        });
        return parentResourcesHtml;
    }

    function reloadAll(){
        $.ajax({
            url:'/api/resources/listAll',
            type:'post',
            success:function(resp){
                if(resp.status==200){
                    var currentPage=table.page();
                    table.clear();
                    table.rows.add(resp.data);
                    table.page(currentPage).draw(false);
                    table.page(currentPage).draw(false);//搞不懂为啥要执行两次才跳转。。一次渲染？一次跳转？
                }else{
                    toastr.error("重新加载资源列表失败！");
                }
            }
        });
    }
    function remove(ids){
        console.log("delete" + ids);
        $.ajax({
            url: '/api/resources/remove',
            type: 'post',
            data: {
                ids: ids
            },
            success: function (resp) {
                if(resp.status==200) {
                    toastr.success("彻底删除成功");
                    reloadAll();
                }else{
                    toastr.error("操作失败");
                }
            },
            error: function () {
                toastr.error("操作失败");
            }
        });
    }

    function getContent(id){
        console.log("get:"+id);
        $.ajax({
            url:'/api/resources/get/'+id,
            type:'post',
            success:function(resp){
                if(resp.status==200){
                    $("#editModal select[name='parentId']").html(getParentResources());
                    $("#editModal input[name='name']").val(resp.data.name);
                    $("#editModal select[name='parentId']").val(resp.data.parentId);
                    $("#editModal input[name='url']").val(resp.data.url);
                    $("#editModal input[name='permission']").val(resp.data.permission);
                    $("#editModal input[name='sort']").val(resp.data.sort);
                    $("body").data("id",resp.data.id);
                }else{
                    toastr.error("获取内容失败");
                }
            },
            error:function(){
                toastr.error("请求失败");
            }
        });
    }

</script>


</body>

</html>